<template>
    <div style="width: 100%">
        <el-form :inline="true">
            <el-form-item>
                <el-button @click="create()">创 建</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="warning" @click="save(advertisements).then()">保 存</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="del()" type="danger" :disabled="multipleSelection.length===0">删 除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="advertisements"
                tooltip-effect="dark"
                align="center"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    key="title"
                    label="标题"
                    width="180">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.Title"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    key="desc"
                    label="描述"
                    width="280">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.Desc" type="textarea"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    key="view"
                    label="浏览量(万次)"
                    width="220">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.View" :precision="2" :step="0.1" :max="100"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                    key="urls"
                    label="连接地址"
                    width="420">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.Url"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    key="images"
                    label="图片">
                <template slot-scope="scope">
                    <div  @click="selectImg(scope.row)" style="cursor: pointer;height:80px;width: 80px">
                        <img v-if="scope.row.Img" :src="$axios.defaults.imgURL + scope.row.Img" style="width:100%; height: 100%">
                        <div v-else tabindex="0" class="el-upload el-upload--picture-card" style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <image-selector
                :visible.sync="dialogImageVisible"
                :title="'选择图片'"
                unique-label="advertisement-label"
                :handle-select="handleImageSelect">
        </image-selector>
    </div>
</template>

<script>
    import imageSelector from '@/components/site/image/selector.vue'
    export default {
        name: "advertisements",
        components: {
            "image-selector": imageSelector
        },
        data(){
            return {
                multipleSelection: [],
                advertisements:[],
                advertisement:{
                    Index: 0,
                    Kind: "",
                    Img: "",
                    Title: "",
                    Desc: "",
                    View: 0,
                    Url: ""
                },
                dialogImageVisible:false,
                imgAdvertisement:null,
            }
        },
        created() {
            this.$axios.get("/advertisements", {params:{page:1,limit:60}}).then((resp)=>{
                let data = resp.data;
                if(data.advertisements){
                    let idx = 0;
                    for(let advertisement of data.advertisements) {
                        advertisement.Index = idx;
                        this.advertisements.push(advertisement);
                        idx++
                    }
                }
            })
        },
        methods:{
            handleImageSelect(img) {
                this.imgAdvertisement.Img = img;
            },
            selectImg(advertisement) {
                this.dialogImageVisible=true;
                this.imgAdvertisement = advertisement;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            create(){
                this.advertisements.splice(0, 0, {
                    Index: this.advertisements.length,
                    Kind: "",
                    Img: "",
                    Title: "",
                    Desc: "",
                    View: 0,
                    Url: ""
                })
            },
            del(){
                let saves = [];
                let idx = 0;
                for(let advertisement of this.advertisements){
                    let find = false;
                    for(let delItem of this.multipleSelection) {
                        if(advertisement.Index === delItem.Index) {
                            find = true;
                            break
                        }
                    }
                    if(!find) {
                        advertisement.Index = idx;
                        saves.push(advertisement);
                        idx++
                    }
                }
                this.save(saves).then((resp)=>{
                    if(this.$isSuccessMsg(resp)) {
                        this.advertisements = saves;
                        this.multipleSelection = [];
                    }
                });
            },
            // saveAll() {
            //     this.save(this.advertisements).then(())
            // },
            save(advertisements) {
                return this.$axios.put("/advertisements", {JsonBody: JSON.stringify(advertisements)})
            }
        }
    }
</script>

<style scoped>

</style>
